<script setup>
import {reactive, ref, onMounted} from "vue";
import {Close, Edit, FullScreen, SwitchButton, View} from "@element-plus/icons-vue";
import {categoryList} from "@/api/game/gameInfo";

const loading = ref(false)
onMounted(() => {
  getList();
})

const categoryData = ref(
    {
      pending: [],
      inProgress: [],
      completed: [],
      exception: []
    }
)
const getList = (tableData) => {
  loading.value = true;
  categoryList().then(res => {
        const data = res.data;
        categoryData.value.pending = data.pending;
        categoryData.value.inProgress = data.inProgress;
        categoryData.value.completed = data.completed;
        categoryData.value.exception = data.exception;
        loading.value = false;
      }
  );
}

const onSubmit = (row) => {
  console.log(row)
}
</script>

<template>
  <div class="task-box">
    <div class="group">
      <div class="tab-box">
        <div class="title">待处理</div>
        <el-table v-loading="loading" :data="categoryData.pending" max-height="340">
          <el-table-column prop="nickname" class-name="ellipsis" align="center" label="昵称" min-width="100"/>
          <el-table-column prop="gameAccount" class-name="ellipsis" align="center" label="账号" min-width="100"/>
          <el-table-column fixed="right" align="center" label="操作" width="100">
            <template #default="scope">
              <el-button :icon="Close" size="small" link type="danger" @click="onSubmit(scope.row)">取消</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="tab-box">
        <div class="title">已完成</div>
        <el-table v-loading="loading" :data="categoryData.completed" max-height="340">
          <el-table-column prop="nickname" class-name="ellipsis" align="center" label="昵称" min-width="100"/>
          <el-table-column prop="gameAccount" class-name="ellipsis" align="center" label="账号" min-width="100"/>
          <el-table-column fixed="right" align="center" label="操作" width="100">
            <template #default="scope">
              <el-button :icon="View" size="small" link type="primary" @click="onSubmit(scope.row)">查看</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <div class="group">
      <div class="tab-box">
        <div class="title">处理中</div>
        <el-table v-loading="loading" :data="categoryData.inProgress" max-height="340">
          <el-table-column prop="nickname" class-name="ellipsis" align="center" label="昵称" min-width="100"/>
          <el-table-column prop="gameAccount" class-name="ellipsis" align="center" label="账号" min-width="100"/>
          <el-table-column fixed="right" align="center" label="操作" width="120">
            <template #default="scope">
              <el-button :icon="SwitchButton" size="small" link type="danger" @click="onSubmit(scope.row)">停止
              </el-button>
              <el-button :icon="FullScreen" size="small" link type="success" @click="onSubmit(scope.row)">画面
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <div class="tab-box">
        <div class="title">异常区</div>
        <el-table v-loading="loading" :data="categoryData.exception" max-height="340">
          <el-table-column prop="nickname" class-name="ellipsis" align="center" label="昵称" min-width="100"/>
          <el-table-column prop="gameAccount" class-name="ellipsis" align="center" label="账号" min-width="100"/>
          <el-table-column fixed="right" align="center" label="操作" width="100">
            <template #default="scope">
              <el-button :icon="Edit" size="small" link type="primary" @click="onSubmit(scope.row)">编辑</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>

  </div>
</template>


<style scoped>
.task-box {
  display: flex;
  flex-wrap: wrap;
  overflow: auto;
  flex: 1; /* 占满父容器的剩余空间 */
  flex-direction: row;
  justify-content: space-around;
  border-radius: 2px;
}

.el-button + .el-button {
  margin-left: 0 !important;
  user-select: none;
}

.tab-box {
  border-radius: 5px;
  min-height: 230px;
  min-width: 300px;
  max-height: 400px;
  margin: 5px;
  padding: 5px;
  flex: 1;
  box-shadow: 0 0 10px #bbbbbb;
}

.tab-box .el-table {
  flex: 1;
}

.tab-box .title {
  margin: 10px 0 10px 0;
  user-select: none;
}

.group {
  display: flex;
  flex-flow: wrap;
  flex: 1;
  flex-direction: column;
  justify-content: space-around;
}

.ellipsis .cell {
  white-space: nowrap; /* 不换行 */
  overflow: hidden; /* 隐藏超出部分 */
  text-overflow: ellipsis; /* 使用省略号显示超出部分 */
  max-width: 100px !important;
}
</style>
